<template>
  <div class="swiper">
    <router-link to="galary" append>
      <swiper :options="swiperOption">
        <swiper-slide
          v-for="item of swiperList"
          :key="item.id">
          <div class="img-wrapper">
            <img
              class="swiper-img"
              :src="item.imgUrl">
          </div>
          <div class="desc-wrapper">
            <span class="left">{{item.date}}</span>
            <span class="middle">{{item.page}}张</span>
            <span class="right">编号：{{item.number}}</span>
          </div>
        </swiper-slide>
      </swiper>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: "detailSwiper",
    data() {
      return {
        swiperOption: {
          loop: true//无线循环
        },
        swiperList: [
          {
            id: '00001',
            imgUrl: 'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg',
            date: '两天一晚',
            page: '100',
            number: '50052'
          },
          {
            id: '00002',
            imgUrl: 'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg',
            date: '两天一晚',
            page: '100',
            number: '50052'
          }
        ]
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .swiper
    position: relative

  .img-wrapper
    overflow: hidden
    height: 0
    padding-bottom: 41.5%
    background: #ccc

  .swiper-img
    max-width: 100%

  .desc-wrapper
    overflow: hidden
    padding: .15rem 0
    position: absolute
    bottom: 0
    left: 0
    background: rgba(0, 0, 0, .6)
    color: #fff
    width: 100%
    display: flex

  .left
    float: left
    margin-left: .4rem
    color: #fff
    font-size: .3rem

  .middle
    flex: 1
    text-align: right
    color: #fff
    padding-right: .3rem
    font-size: .3rem

  .right
    float: right
    margin-right: .1rem
    color: #fff
    font-size: .3rem

</style>
